<template>
  <scroll class="listview" ref="listView" :listenScroll="listenScroll" :probeType="probeType" @scroll="scroll" :data="list">
    <ul>
      <li class="list-group" v-for="group in list" ref="listGroup">
        <h2 class="list-group-title">{{group.title}}</h2>
        <ul>
          <li class="list-group-item" @click="selectItem(item)" v-for="item in group.items">
            <img class="avatar" v-lazy="item.avatar" alt="">
            <span class="name">{{item.name}}</span>
          </li>
        </ul>
      </li>
    </ul>
    <div class="list-shortcut" @touchstart.stop.prevent="onTouchstartShortcut" @touchmove.prevevnt.stop="onTouchMoveShortcut">
      <ul>
        <li class="item" :class="{ 'current': currentInIndex===index}" v-for="(item,index) in shortcutList" :data-index="index">{{item}}</li>
      </ul>
    </div>
    <div class="list-fixed" v-show="fixedTitle" ref="fixed">
      <h1 class="fixed-title">{{fixedTitle}}</h1>
    </div>
    <div class='loading-container' v-show='!list'>
        <loading></loading>
    </div>
  </scroll>
</template>

<script type="text/ecmascript-6">
  import Scroll from 'base/scroll/scroll'
  import Loading from 'base/loading/loading'
  import {getData} from "common/js/dom";

  const ANCHOR_HEIGHT = 18
  const TITLE_HEIGHT = 30
  export default {
    name: 'listview',
    props: {
      list: {
        type: Array,
        default: []
      }
    },
    data(){
      return{
        scrollY:-1,
        currentInIndex:0,
        diff: -1
      }
    },
    watch: {
      list() {
        // 监控数据是否传进来并且计算高度
        // 受到父组件v-if的影响，list刚进来的时候并没有数据变化，所以并没有进入到这里
        // console.log("-------list",this.list)
        setTimeout(() => {
          this._caculateToTop()
        }, 20)
      },
      scrollY(newY){
        // 监控y  listHeight做一个数据缓存
        const listHeight=this.listHeight
        //当滚动到顶部newY大于0
        if(newY>0){
          this.currentInIndex=0
          return
        }
        //在中间部分
        for(let i=0;i<listHeight.length;i++){
          let height1 =listHeight[i]
          let height2 =listHeight[i+1]
          if(-newY>=height1 && -newY<height2){
            this.currentInIndex=i
            this.diff=height2+newY
            return
          }
          //大于最后一个的上限
          this.currentInIndex=listHeight.length
        }
      },
      diff(newVal) {
        let fixedTop = (newVal > 0 && newVal < TITLE_HEIGHT) ? newVal - TITLE_HEIGHT : 0
        if (this.fixedTop === fixedTop) {
          return
        }
        this.fixedTop = fixedTop
        this.$refs.fixed.style.transform = `translate3d(0,${fixedTop}px,0)`
      }
    },
    created(){
      this.listHeight=[]
      //为什么这几个数据不放到data props上面，因为这两个地方的数据会被vue去增加一个getter和setter，监听数据的变化，主要是用于数据绑定的作用
      this.touch = {}
      this.listenScroll=true
      this.probeType=3
    },
    mounted(){
      //注意在created的时候数据还没有传进来
      // this._caculateToTop()
      // console.log("--entered listview",this.list.length)
    },
    methods: {
      selectItem(item) {
        this.$emit('select', item)
      },
      onTouchstartShortcut(e){
        // let index=e.target.dataset.index
        let index=getData(e.target,'index')
        let oTouch = e.touches[0]
        this.touch.y1=oTouch.pageY
        this.touch.index1=index
        // this.$refs.listView.scrollToElement(this.$refs.listGroup[index],0)
        this._scrollToElement(index)
      },
      onTouchMoveShortcut(e){
        let oTouch = e.touches[0]
        this.touch.y2 = oTouch.pageY
        //y轴便宜的像素
        let delta = Math.floor((this.touch.y2-this.touch.y1)/ANCHOR_HEIGHT)
        // 这样就得到了此时手在的位置的点的index
        let index = this.touch.index1 + delta;
        this._scrollToElement(index)
      },
      refresh() {
        // console.log(this.$refs.listView)
        this.$refs.listView.refresh()
      },
      scroll(pos){
        //观测一个变量scrollY，并通过scroll事件修改
        this.scrollY=pos.y
      },
      _scrollToElement(index){
        //滚动到指定index的位置
        if(!index&&index!==0) return false
        if(index<0)index=0
          //这里-2是因为在数据处理的时候，多加了两个数据
        else if(index>this.listHeight.length-2){
          index=this.listHeight.length-2
        }
        this.scrollY=-this.listHeight[index]

        // this.scrollY=-this.listHeight[index]
        //第二个参数的是滚动动画的时间 0 是没有
        this.$refs.listView.scrollToElement(this.$refs.listGroup[index],0)

      },
      _caculateToTop(){
        // console.log("_caculateToTop")
        // 该字母集合体离顶部的高度
        this.listHeight=[]
        const list=this.$refs.listGroup
        let height=0
        this.listHeight.push(height)
        for(let i=0;i<list.length;i++){
          height+=list[i].clientHeight
          this.listHeight.push(height)
        }
      }
    },
    computed:{
      shortcutList(){
        return this.list.map((item)=>{
          return item.title.substr(0,1)
        })
      },
      fixedTitle(){
        return this.list[this.currentInIndex]?this.list[this.currentInIndex].title:''
      }
    },
    components:{
      //是数据加载完成后发现页面不能滚动怎么回事
      Scroll,
      Loading
    }
  }
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"

  .listview
    position: relative
    width: 100%
    height: 100%
    overflow: hidden
    background: $color-background
    .list-group
      padding-bottom: 30px
      .list-group-title
        height: 30px
        line-height: 30px
        padding-left: 20px
        font-size: $font-size-small
        color: $color-text-l
        background: $color-highlight-background
      .list-group-item
        display: flex
        align-items: center
        padding: 20px 0 0 30px
        .avatar
          width: 50px
          height: 50px
          border-radius: 50%
        .name
          margin-left: 20px
          color: $color-text-l
          font-size: $font-size-medium
    .list-shortcut
      position: absolute
      z-index: 30
      right: 0
      top: 50%
      transform: translateY(-50%)
      width: 20px
      padding: 20px 0
      border-radius: 10px
      text-align: center
      background: $color-background-d
      font-family: Helvetica
      .item
        padding: 3px
        line-height: 1
        color: $color-text-l
        font-size: $font-size-small
        &.current
          color: $color-theme
    .list-fixed
      position: absolute
      top: 0
      left: 0
      width: 100%
      .fixed-title
        height: 30px
        line-height: 30px
        padding-left: 20px
        font-size: $font-size-small
        color: $color-text-l
        background: $color-highlight-background
    .loading-container
      position: absolute
      width: 100%
      top: 50%
      transform: translateY(-50%)
</style>
